<template>
  <div class="system-logs">
    <el-card class="mb-3">
      <template #header>
        <div class="card-header">
          <span>系统日志</span>
          <div>
            <el-button @click="exportLogs">导出日志</el-button>
            <el-button type="danger" @click="clearLogs">清空日志</el-button>
          </div>
        </div>
      </template>
      
      <el-form :model="searchForm" inline class="search-form">
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="日志级别">
          <el-select v-model="searchForm.level" placeholder="请选择日志级别">
            <el-option label="全部" value="" />
            <el-option label="INFO" value="info" />
            <el-option label="WARN" value="warn" />
            <el-option label="ERROR" value="error" />
          </el-select>
        </el-form-item>
        <el-form-item label="关键字">
          <el-input v-model="searchForm.keyword" placeholder="请输入关键字" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchLogs">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
      
      <el-table :data="logs" style="width: 100%" v-loading="loading" height="500">
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="timestamp" label="时间" width="180" />
        <el-table-column prop="level" label="级别" width="100">
          <template #default="scope">
            <el-tag :type="getLevelTagType(scope.row.level)">
              {{ scope.row.level.toUpperCase() }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="module" label="模块" width="120" />
        <el-table-column prop="message" label="消息" show-overflow-tooltip />
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button size="small" @click="viewLogDetail(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    
    <!-- 日志详情对话框 -->
    <el-dialog v-model="detailDialogVisible" title="日志详情" width="700px">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="ID">{{ currentLog.id }}</el-descriptions-item>
        <el-descriptions-item label="时间">{{ currentLog.timestamp }}</el-descriptions-item>
        <el-descriptions-item label="级别">
          <el-tag :type="getLevelTagType(currentLog.level)">
            {{ currentLog.level.toUpperCase() }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="模块">{{ currentLog.module }}</el-descriptions-item>
        <el-descriptions-item label="消息">{{ currentLog.message }}</el-descriptions-item>
        <el-descriptions-item label="详细信息">
          <pre class="log-detail">{{ currentLog.detail }}</pre>
        </el-descriptions-item>
      </el-descriptions>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="detailDialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  name: 'SystemLogs',
  setup() {
    // 数据状态
    const loading = ref(false)
    const detailDialogVisible = ref(false)
    
    // 搜索表单
    const searchForm = reactive({
      dateRange: [],
      level: '',
      keyword: ''
    })
    
    // 日志列表
    const logs = ref([
      {
        id: 1001,
        timestamp: '2023-05-25 14:30:22',
        level: 'info',
        module: '用户管理',
        message: '用户admin登录成功',
        detail: '用户ID: 1, IP地址: 192.168.1.100, 登录时间: 2023-05-25 14:30:22'
      },
      {
        id: 1002,
        timestamp: '2023-05-25 14:25:17',
        level: 'warn',
        module: '内容管理',
        message: '剪纸文化内容审核失败',
        detail: '内容ID: 45, 标题: 中国剪纸艺术的历史发展, 错误原因: 内容包含敏感词汇'
      },
      {
        id: 1003,
        timestamp: '2023-05-25 11:45:05',
        level: 'info',
        module: '系统管理',
        message: '系统配置更新成功',
        detail: '更新模块: 小程序配置, 更新时间: 2023-05-25 11:45:05'
      },
      {
        id: 1004,
        timestamp: '2023-05-25 09:20:33',
        level: 'error',
        module: '文件存储',
        message: '图片上传失败',
        detail: '文件名: artwork.jpg, 错误码: 500, 错误信息: 服务器内部错误'
      }
    ])
    
    // 分页信息
    const pagination = reactive({
      currentPage: 1,
      pageSize: 10,
      total: 4
    })
    
    // 当前查看的日志
    const currentLog = reactive({
      id: null,
      timestamp: '',
      level: '',
      module: '',
      message: '',
      detail: ''
    })
    
    // 获取日志列表
    const fetchLogs = async () => {
      loading.value = true
      try {
        // 模拟API调用
        await new Promise(resolve => setTimeout(resolve, 500))
        // 实际项目中这里会调用后端API
      } catch (error) {
        ElMessage.error('获取日志列表失败')
      } finally {
        loading.value = false
      }
    }
    
    // 搜索日志
    const searchLogs = () => {
      fetchLogs()
    }
    
    // 重置搜索
    const resetSearch = () => {
      searchForm.dateRange = []
      searchForm.level = ''
      searchForm.keyword = ''
      fetchLogs()
    }
    
    // 查看日志详情
    const viewLogDetail = (row) => {
      Object.assign(currentLog, row)
      detailDialogVisible.value = true
    }
    
    // 导出日志
    const exportLogs = () => {
      ElMessage.info('正在导出日志...')
      // 模拟导出过程
      setTimeout(() => {
        ElMessage.success('日志导出成功')
      }, 1000)
    }
    
    // 清空日志
    const clearLogs = () => {
      ElMessageBox.confirm(
        '确定要清空所有日志吗？此操作不可恢复！',
        '确认清空',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        logs.value = []
        pagination.total = 0
        ElMessage.success('日志清空成功')
      }).catch(() => {
        // 取消操作
      })
    }
    
    // 获取级别标签类型
    const getLevelTagType = (level) => {
      const levelMap = {
        info: 'primary',
        warn: 'warning',
        error: 'danger'
      }
      return levelMap[level] || 'info'
    }
    
    // 分页处理
    const handleSizeChange = (val) => {
      pagination.pageSize = val
      fetchLogs()
    }
    
    const handleCurrentChange = (val) => {
      pagination.currentPage = val
      fetchLogs()
    }
    
    // 组件挂载时获取数据
    onMounted(() => {
      fetchLogs()
    })
    
    return {
      loading,
      detailDialogVisible,
      searchForm,
      logs,
      pagination,
      currentLog,
      searchLogs,
      resetSearch,
      viewLogDetail,
      exportLogs,
      clearLogs,
      getLevelTagType,
      handleSizeChange,
      handleCurrentChange
    }
  }
}
</script>

<style scoped>
.mb-3 {
  margin-bottom: 1rem;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-form {
  margin-bottom: 20px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.log-detail {
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
  max-height: 200px;
  overflow-y: auto;
}
</style>